<template>
  <compWrapper theme="primary"
               title="基本信息">
    <compFormQuery :formdata="getBase"
            :labelWidth="120"
            :value="formData"
            class="margin-layout"
            ></compFormQuery>
    <compFormEdit :formdata="getBase"
                  :labelWidth="120"
                  class="margin-layout width-60per"
                  ref="formbase"
                  :col="1"
                  v-model="formData" />
    <div class="text-right">
      <Button @click="submit"
              class="margin-right-10"
              theme="primary">确认</Button>
      <Button @click="close">返回</Button>
    </div>
    <div class="code"
         style="padding-left:100px;background:#d1d1d1;">
      <pre ref="responseDataContent"></pre>
    </div>
    <compModal v-model="operate.show" v-bind="operate" @on-close="operate.show=false">
			<component
				v-if="operate.component"
				:is="operate.component"
				v-bind="operate.props"
				@on-close="operate.show=false"
				v-on="operate.on"
			/>
		</compModal>
		<Spin loading size="large" transfer v-if="loading"></Spin>
  </compWrapper>
    <!-- <vxe-toolbar>
          <template #buttons>
            <vxe-button @click="allAlign = 'left'">居左</vxe-button>
            <vxe-button @click="allAlign = 'center'">居中</vxe-button>
            <vxe-button @click="allAlign = 'right'">居右</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          :align="allAlign"
          :data="tableData">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="name" title="Name"></vxe-column>
          <vxe-column field="sex" title="Sex"></vxe-column>
          <vxe-column field="age" title="Age"></vxe-column>
        </vxe-table> -->
</template>

<script>
import { h,resolveComponent,Slots,reactive,defineComponent } from 'vue'
import { mapGetters } from 'vuex'
import compUserlist from './userlist';
import mixin from '../mixin'
import { HttpBizeventGen } from '../../../service/notice'
// import { VxeGridProps } from 'vxe-table'


export default {
  components: {
    compUserlist
  },
  mixins: [mixin],
  data () {
    return {
      loading: false,
      formData: {
        userName: [],
        // evtpId: 1
      },
      operate: {
        show: false,
      },
        allAlign: null,
        tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
        ]
    }
  },
  created () {
    this.formData = {
      userName: [this.getAuthUser.name],
      evtpId: 1,
      orgId: this.getAuthUser.orgId,
      uid: this.getAuthUser.id,
      gkey: 12345675,
    }
    // console.log(this.getOrgList,'this.formData')
  },

  methods: {
    rowTrimWebhookPrefix (webhookUrl) {
      console.log(webhookUrl, 'rowTrimWebhookPrefixrowTrimWebhookPrefix')
      // if (webhookUrl && webhookUrl.indexOf('=') !== -1 && (webhookUrl.indexOf('=') != webhookUrl.length - 1)) {
      //     this.formData.gkey = webhookUrl.substring(webhookUrl.indexOf('=') + 1)
      // } else {
      //     this.formData.gkey = webhookUrl
      // }
    },
    //保存数据
    async submit () {
      // return console.log(this.formData);
      const valid = await this.$refs.formbase.validate()
      if (!valid) return
      // return console.log('valid', valid, this.formData);
      this.loading = true
      const formData = {
        ...this.formData,
      }
      await HttpBizeventGen(formData).then(this.parseResponse).catch(err => {
        this.$Message.error(err.message)
        this.loading = false
      })
    },
    parseResponse (data) {
    //   console.log('parseResponse', data)
      const { responseDataContent } = this.$refs;
      responseDataContent.innerHTML = JSON.stringify(data, null, 2)
      this.loading = false
      this.$Message.success(data.message)
      this.close()
    },
    close () {
      this.$router.push({
        name: 'noticeRules'
      })
    },
    handleUserModal () {
      this.operate = {
        title: '用户',
        show: true,
        width: 'large',
        component: "compUserlist",
        props: {
          initFormData: {
            'ids': this.formData.uid
          }
        },
        on: {
          'on-data': (row) => {
            this.operate = {};
            this.formData = { ...this.formData, uid: row.id, userName: [row.name] };
          }
        },
        showFooter: false,
      }
    },
  },
  computed: {
    ...mapGetters(['isSuper', 'getAuthUser']),
    ...mapGetters('dictionary', ['getProductList', 'getAccountList', 'getWarehouseList', 'getOrgList']),
    getBase () {
      return [
        // {
        // 	label: "模板名称",
        // 	key: "title",
        // },
        {
          label: '事件类型',
          key: 'evtpId',
          tag: 'Select',
          options: this.getNoticeEevntTypes,
            'onOn-change': () => {
                console.log('change');
            }
        },
        {
          label: "指定人员",
          key: "userName",
          tag:'div',
          children: () => {
                let _this = this;
                return h(resolveComponent("Input"),{
                    // readonly:true,
                    // clearable:true,
                    modelValue:this.formData.userName
                },{
                    suffix: () => {
                        return h(resolveComponent("Icon"), {
                            type: "ios-search",
                            onClick: () => {
                                _this.handleUserModal()
                            }
                        },)
                    }
                });
          },
          required: false,
        },
        {
          label: '钉钉token',
          key: 'gkey',
          tag: 'Input',
          clear: true,
          required: false,
          formItem: {
            tip: '<div class=color-info>如果通知方式是钉钉，此栏位必填。请填写钉钉群组的webhook的token部分</div>'
          },
          on: {
            'on-blur': this.rowTrimWebhookPrefix
          }
        },
        // {
        //   label: "所属组织",
        //   key: "orgId",
        //   tag: "Select",
        //   options: this.getOrgList,
        //   props: {
        //     filterable: true,
        //   },
        //   required: true,
        // },
        // {
        //   label: '所属项目',
        //   key: 'lineId',
        //   tag: 'Select',
        //   options: this.getProductList,
        //   props: {
        //     filterable: true,
        //   },
        //   required: false,
        // },
        // {
        //   label: '所属渠道账号',
        //   key: 'accountId',
        //   tag: 'Select',
        //   options: this.getAccountList,
        //   props: {
        //     filterable: true,
        //   },
        //   required: false,
        // },
        // {
        //   label: '所属组织仓库',
        //   key: 'orgwarehouseId',
        //   tag: 'Select',
        //   options: this.getWarehouseList,
        //   props: {
        //     filterable: true,
        //   },
        //   required: false,
        // },
        // {
        //   label: '平台单据编号',
        //   key: 'idLabel',
        //   tag: 'Input',
        //   required: false,
        //   on: {
        //     'on-blur': this.rowTrimWebhookPrefix
        //   }
        // },
        {
          label: '来源单据编号',
          key: 'srcLabel',
          tag: 'Input',
          required: false,
          props: {
            icon:"ios-search"
          },
        },
        // {
        //   label: '事件说明',
        //   key: 'title',
        //   tag: 'Input',
        //   required: false,
        // },
        // {
        //   label: '事件等级',
        //   key: 'level',
        //   tag: 'Select',
        //   options: this.getAppLevel,
        //   required: false,
        // }
      ]
    }
  }
}
</script>


